<template>
    <div v-if="pop.view.setting">
        <Pop :title="title" :z-index="pop.zIndex.setting" @cancel="onCancel" @sure="onSure">
            <div>
                <div class="tip">{{ factory.size.width }} x {{ factory.size.height }}</div>
                <div class="row">
                    <span class="lbe">width:</span>
                    <input class="txt" type="text" v-model="store.width.num" @input="onWidth" />
                    <jCheckbox class="outx" v-model="store.width.lock" @change="onWidth">
                        <span class="conn">关联高度</span>
                    </jCheckbox>
                </div>
                <div class="row">
                    <span class="lbe">height:</span>
                    <input class="txt" type="text" v-model="store.height.num" @input="_.debounce(onHeight, 300)" />
                    <jCheckbox class="outy" v-model="store.height.lock" @change="onHeight">
                        <span class="conn">关联宽度</span>
                    </jCheckbox>
                </div>
            </div>
        </Pop>
    </div>

</template>


<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';
import jCheckbox from "@/components/j-checkbox/index.vue"
import { useFactory } from '@/stores/factory';
import { useRouter } from 'vue-router';
import Pop from "../pop/index.vue"
import _ from "lodash";
import { usePop } from '@/stores/pop';

const pop = usePop();
const router = useRouter();
const title = ref("设置");
const factory = useFactory();

const store = reactive({
    width: {
        num: 1,
        lock: localStorage.getItem("widthLock") == "1"
    },
    height: {
        num: 1,
        lock: localStorage.getItem("heightLock") == "1"
    }
});

watch(() => factory.size, (v) => {
    if (v) {
        store.width.num = v.width;
        store.height.num = v.height;
    }
})

function onCancel() {
    // factory.changeSetting(false)
    pop.hide("setting");
}

function onSure() {
    console.log(JSON.stringify(store))
    setTimeout(() => {
        // factory.changeSetting(false);
        pop.hide("setting");
        let scale = {
            x: Number(store.width.num) / factory.size.width,
            y: Number(store.height.num) / factory.size.height,
        };
        let pots = factory.pots.map((item: any) => {
            return {
                x: item.x * scale.x,
                y: item.y * scale.y
            }
        })
        localStorage.setItem("pots", JSON.stringify(pots));
        router.push("/mesh");
    }, 30);

}

const onWidth = _.debounce(function () {
    console.log("store.width", store.width.num);
    const { width, height } = factory.size;
    if (store.width.lock) {
        store.height.num = Number(store.width.num) / width * height;
    }
    localStorage.setItem("widthLock", Number(store.width.lock) + "")
}, 300)

const onHeight = _.debounce(function () {
    const { width, height } = factory.size;
    if (store.height.lock) {
        store.width.num = Number(store.height.num) / height * width;
    }
    localStorage.setItem("heightLock", Number(store.height.lock) + "")
}, 300);

</script>

<style lang="less" scoped>
@import url("./index.less");
</style>